<style lang="less">
@import '../../../styles/common.less';
</style>

<template>
  <Card style="height:800px">
    <Card>
      <header>
        <Form action="" method="get" name="exportList" id="exportList" enctype="multipart/form-data">
          <Row>
            <span>客户结清:</span>
            <DatePicker v-model="trialCondition.customerSettleBeginDate" type="date" style="width: 150px" name="pushBeginDate"></DatePicker>
            <span> 至</span>
            <DatePicker v-model="trialCondition.customerSettleEndDate" type="date" placement="bottom-end" style="width: 150px" name="pushEndDate"></DatePicker>
            <span style="width: 200px;margin-left: 15px;">申请日期：</span>
            <DatePicker v-model="trialCondition.applyBeginDate" type="date" style="width: 150px" name="pushBeginDate"></DatePicker>
            <span>至</span>
            <DatePicker v-model="trialCondition.applyEndDate" type="date" placement="bottom-end" style="width: 150px" name="pushEndDate"></DatePicker>
            <span style="width: 200px;margin-left: 15px;">申请结果：</span>
            <Select v-model="trialCondition.applyStatus" class="v-select-wrapper" style="width:150px" name="applyStatus">
              <Option v-for="item in statusList" :value="item.key" :key="item.key">{{ item.label }}</Option>
            </Select>
            <span style="width: 200px;margin-left: 15px;">产品：</span>
            <Select v-model="trialCondition.productType" class="v-select-wrapper" style="width:150px" name="productType">
              <Option v-for="item in productList" :value="item.key" :key="item.key">{{ item.label }}</Option>
            </Select>
          </Row>
          <Row style="margin-top: 15px">
            <span style="width: 200px">民泰结清状态：</span>
            <Select v-model="trialCondition.mtSettleStatus" class="v-select-wrapper" style="width:150px" name="mtSettleStatus">
              <Option v-for="item in mtSettleStatusList" :value="item.key" :key="item.key">{{ item.label }}</Option>
            </Select>
            <Button type="primary" @click="listQuery" style="margin-left: 10px;">查询</Button>
          </Row>
          <input type="hidden" name="pageNum" id="pageNum" value="" />
          <input type="hidden" name="pageSize" id="pageSize" value="" />
        </Form>
      </header>
    </Card>
    <Card>
      <div>
        <Table border :columns="orderColumns" :data="orderData" style="width: 100%;"></Table>
      </div>
      <div style="text-align: center;margin-top: 36px;">
        <Page :total="trialCondition.total" :current="trialCondition.pageNum" :page-size="trialCondition.pageSize" size="small" show-elevator show-sizer show-total @on-change="pageChange" @on-page-size-change="sizeChange"></Page>
      </div>
      <div style="margin-top: 93px;text-align: center;margin-top: 52px;float: right;">
        <Button type="primary" @click="downLoad">下载</Button>
      </div>
    </Card>
  </Card>
</template>

<script>
export default {
  name: 'mutative-router',
  data () {
    return {
      trialCondition: {
        customerSettleBeginDate: '',
        customerSettleEndDate: '',
        applyBeginDate: '',
        applyEndDate: '',
        applyStatus: '',
        productType: '',
        mtSettleStatus: '',
        pageNum: 1,
        pageSize: 10,
        total: 0,
        id: ''
      },
      orderColumns: [
        {
          type: 'index',
          title: '序号',
          width: 60
        },
        {
          title: '姓名',
          key: 'custName',
          align: 'center'
        },
        {
          title: '身份证',
          key: 'custIdNumber',
          align: 'center'
        },
        {
          title: '产品',
          key: 'productName',
          align: 'center'
        },
        {
          title: '合同金额',
          key: 'contractAmount',
          align: 'center'
        },
        {
          title: '期限',
          key: 'term',
          align: 'center'
        },
        {
          title: '客户清算时间',
          key: 'customerLiquidationTime',
          align: 'center',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.loanModularFormatTime(params.row.customerLiquidationTime))
            ])
          }
        },
        {
          title: '实收金额',
          key: 'amountCollected',
          align: 'center'
        },
        {
          title: '申请结算时间',
          key: 'applySettlementTime',
          align: 'center',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.loanModularFormatTime(params.row.applySettlementTime))
            ])
          }
        },
        {
          title: '申请结果',
          key: 'applyResult',
          align: 'center',
          render: (h, params) => {
            if (params.row.status === '' || params.row.status === null) {
              return h('span', {
              }, '待申请')
            } else if (params.row.status === '0') {
              return h('span', {
              }, '成功')
            } else if (params.row.status === '1') {
              return h('span', {
              }, '失败')
            }
          }
        },
        {
          title: '申请人',
          key: 'createdBy',
          align: 'center'
        },
        {
          title: '富爵结清金额',
          key: 'fjSettleAmount',
          align: 'center'
        },
        {
          title: '明泰结清状态',
          key: 'fjSettleStatus',
          align: 'center',
          render: (h, params) => {
            if (params.row.fjSettleStatus === '' || params.row.fjSettleStatus === null) {
              return h('span', {
              }, '待申请')
            } else if (params.row.fjSettleStatus === '0') {
              return h('span', {
              }, '已结清')
            } else if (params.row.fjSettleStatus === '1') {
              return h('span', {
              }, '未结清')
            } else if (params.row.fjSettleStatus === '2') {
              return h('span', {
              }, '处理中')
            }
          }
        },
        {
          title: '操作',
          align: 'center',
          render: (h, params) => {
            if (params.row.fjSettleStatus === null || params.row.fjSettleStatus === '') {
              return h('span', {
                style: {
                  'color': '#20a0ff',
                  'cursor': 'pointer'
                },
                on: {
                  click: () => {
                    var vm = this
                    var data = { 'loanId': params.row.loanId, 'custName': params.row.custName, 'custIdNumber': params.row.custIdNumber, 'contractBeginDate': vm.$util.loanModularFormatTime(params.row.contractStartDate), 'loanAmount': params.row.contractAmount, 'fjAmount': params.row.fjSettleAmount }
                    this.$router.push({ name: 'mt-ahead-settle-trial-apply', params: { data } })// 类似post传参
                  }
                }
              }, '申请')
            }
            if (params.row.fjSettleStatus === '2') {
              return h('span', {
                style: {
                  'color': '#20a0ff',
                  'cursor': 'pointer'
                },
                on: {
                  click: () => {
                    var vm = this
                    vm.updateStatus(params.row.loanId, params.row._index)
                  }
                }
              }, '更新状态')
            }
          }
        }
      ],
      orderData: [],
      statusList: [
        {
          'key': '',
          'label': '请选择'
        },
        {
          'key': '2',
          'label': '待申请'
        },
        {
          'key': '0',
          'label': '成功'
        },
        {
          'key': '1',
          'label': '失败'
        }
      ],
      mtSettleStatusList: [
        {
          'key': '',
          'label': '请选择'
        },
        {
          'key': '0',
          'label': '已结清'
        },
        {
          'key': '1',
          'label': '未结清'
        },
        {
          'key': '2',
          'label': '处理中'
        }
      ],
      productList: [
        {
          'key': '',
          'label': '请选择'
        },
        {
          'key': '1',
          'label': '云保贷'
        },
        {
          'key': '4',
          'label': '云房贷'
        }
      ]
    }
  },
  computed: {
    avatorImage () {
      return localStorage.avatorImgPath
    }
  },

  created () {
    // 初始化当前页面请求对象实例
    this.$ajax = this.$util.ajax()
    this.listQuery()
  },

  methods: {
    pageChange: function (pageNum) {
      var vm = this
      vm.trialCondition.pageNum = pageNum
      vm.listQuery()
    },
    sizeChange: function (pageLength) {
      var vm = this
      vm.trialCondition.pageSize = pageLength
      vm.listQuery()
    },
    listQuery () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/fund/mtTrail/service/trialList', vm.trialCondition).then(re => {
        var data = re.data
        vm.orderData = data.data.list
        vm.trialCondition.total = data.data.total
      }).catch(er => {

      })
    },
    downLoad () {
      document.getElementById('exportList').action = this.$appContext.marvels_core_financial + 'financial/fund/mtTrail/service/downLoad'
      document.getElementById('pageNum').value = this.trialCondition.pageNum
      document.getElementById('pageSize').value = this.trialCondition.pageSize
      document.getElementById('exportList').submit()
    },
    updateStatus (loanId, index) {
      var vm = this
      vm.trialCondition.loanId = loanId
      this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/fund/mtTrail/service/updateStatus', vm.trialCondition).then(re => {
        var data = re.data
        vm.orderData[index].fjSettleStatus = data.data
      }).catch(er => {

      })
    }
  }
}
</script>
